<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>下拉菜单</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 80px;
			font-size: 24px;
			border: 1px black solid;
			text-align: center;
			line-height: 80px;
			margin: 50px auto;
		}
		div ul{
			list-style-type: none;
			padding-left:0; 
			margin: 0 0 0 -1px;
			display: none;
		}
		
		div ul li{
			width: 200px;
			height: 80px;
			border: 1px black solid;
			color: black;
			
		}
		div:hover{
			background-color:lightblue;
			color: white;

		}
		div ul li:hover{
			background-color: lightblue;
			color: white;
		}

		div:hover ul{
			display: block;
		}
		
	</style>
</head>
<body>
	<div>中秋吃什么
		<ul>
			<li>月饼</li>
			<li>烤肉</li>
			<li>麻辣干锅</li>
			<li>土司塔</li>
			<li>榴莲泡芙</li>
		</ul>
	</div>
</body>
</html>